import { cx } from "@/utils";
import { Checkbox } from "@arco-design/web-react";
import { IconCaretDown, IconCaretUp } from "@arco-design/web-react/icon";
import { memo, useCallback, useMemo } from "react";
import styles from './Header.module.scss';
import { defaultSorterDirections } from "./const";
import { ColFixeds, IColumn } from "./types";
import { calcTreeDepth, theadDoms } from "./util";

/** 表头 */
const Header = memo((props: {
  columns: IColumn<any>[];
  /** 固定列配置 */
  colFixed: ColFixeds;
  /** 展示选中列 */
  showCheckbox?: boolean;
  /** 选中所有 */
  selectAll?: boolean;
  /** 半选 */
  indeterminate?: boolean;
  /** 选中 */
  onSelectAll?: (checked: boolean) => void;
  /** 排序中的列 */
  sortKey?: string | number;
  /** 排序方向 */
  sortDirection?: 'ascend' | 'descend';
  /** 触发排序 */
  onSort: (colKey: string | number) => void;
}) => {
  const { columns, colFixed, showCheckbox, indeterminate, selectAll, onSelectAll, sortKey, sortDirection, onSort } = props;
  const doms = useMemo(() => theadDoms(columns), [columns]);
  const depth = useMemo(() => {
    return Math.max(...columns.map(calcTreeDepth));
  }, [columns]);

  const checkHandler = useCallback((checked: boolean) => {
    onSelectAll?.(checked);
  }, [onSelectAll]);

  return (
    <thead>
      {
        doms.map((d, idx) => (
          <tr>
            {
              showCheckbox && idx === 0 ? (
                <th rowSpan={depth} key='checkbox' className={styles.th}>
                  <Checkbox onChange={checkHandler} checked={selectAll} indeterminate={selectAll ? false : indeterminate} />
                </th>
              ) : null
            }
            {
              d.map(cell => {
                const fixed = colFixed[cell.key];
                const cls = cx({
                  [styles.th]: true,
                  [styles.fixedRight]: fixed ? fixed.isRight : false,
                  [styles.fixedLeft]: fixed ? fixed.isLeft : false,
                  [styles.first]: fixed ? fixed.first : false,
                });
                const style = fixed ? {
                  [fixed!.isLeft ? 'left' : 'right']: fixed!.offset,
                } : undefined;

                const sortDirections = cell.sortDirections || defaultSorterDirections;

                return (
                  <th style={style} className={cls} rowSpan={cell.thRowSpan === 0 ? undefined : cell.thRowSpan} colSpan={cell.thColSpan} key={cell.key}>
                    {cell.title}
                    {
                      cell.sorter && (
                        <div onClick={() => { onSort(cell.key); }} className={styles.sorter}>
                          {
                            !!cell.sorter && sortDirections.includes('ascend') && (
                              <div className={sortKey === cell.key && sortDirection === 'ascend' ? styles.active : ''}>
                                <IconCaretUp />
                              </div>
                            )
                          }
                          {
                            !!cell.sorter && sortDirections.includes('descend') && (
                              <div className={sortKey === cell.key && sortDirection === 'descend' ? styles.active : ''}>
                                <IconCaretDown />
                              </div>
                            )
                          }
                        </div>
                      )
                    }
                  </th>
                )
              })
            }
          </tr>
        ))
      }
    </thead>
  );
});

export {
  Header
};

